<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>摄影</title>
    <link rel="icon" href="blogyg-logo.png" type="image/x-icon"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/element-index.css">
    <link rel="stylesheet" href="./css/index.css">
    <style type="text/css">
        [v-cloak] {
            display: none !important;
        }
    </style>
</head>
<body>
<div id="app" style="display: flex;flex-direction: row" v-cloak>
    <div class="left-auth" v-if="checkType">
        <div class="img-sty">
            <img src="" alt=""/>
            <div class="auth-text">
                <div style="color: black;text-align: center;margin-top:5%;font-size: 2rem">
                    {{ authInfo.auth }}
                </div>
                <div style="color: rgba(87, 87, 87, 0.75);margin-top:5%;margin-bottom: 5%;">
                    {{ authInfo.description }}
                </div>
            </div>
        </div>
        <div>
            <el-link class="link-menu" @click="gotoPage('index.html')"><i
                    class="el-icon-s-home el-icon--right"></i> 主页
            </el-link>
        </div>
        <div>
            <el-link class="link-menu" @click="gotoPage('code.html')"><i
                    class="el-icon-s-platform el-icon--right"></i> 编程
            </el-link>
        </div>
        <div>
            <el-link class="link-menu" @click="gotoPage('photo.html')"><i
                    class="el-icon-camera el-icon--right"></i> 摄影
            </el-link>
        </div>
        <div>
            <el-tooltip class="item" effect="dark" content="点我访问本项目的GitHub地址😊" placement="top">
                <el-link class="link-menu" href="https://github.com/yg-y/yg-y.github.io">
                    <img style="width: 1rem;padding-right: 0.3rem;color: rgba(184,184,184,0.35)"
                         src="photo/github.svg"/>喵喵
                </el-link>
            </el-tooltip>
        </div>
    </div>
    <div class="center-content">
        <div class="car-content" v-for="item in contents" @click="clickContent(item.id)">
            <div style="font-size: 1.3rem;">{{ item.name }}</div>
            <div style="font-size: 1rem;color: rgba(87,87,87,0.75);margin-top: 0.5rem">
                {{ item.titleName }}
            </div>
            <div style="color: rgba(87,87,87,0.57);font-size: 0.9rem;margin-top: 0.5rem">
                {{ item.tag }} · {{ item.auth }} · {{ item.creatTime }}
            </div>
        </div>
    </div>
</div>
</body>
<script src="js/vue@2.6.11.js"></script>
<!-- 引入组件库 -->
<script src="./js/element-index.js"></script>
<script src="./js/data-photo.js"></script>
<script src="./js/common.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                contents: this.getSortList(),
                authInfo: getAuthInfo(),
                checkType: true,
                screenWidth: '',
                screenHeight: '',
                changeDiv: '',
            }
        },
        methods: {
            clickContent: function (id) {
                window.location.href = './content.html?type=2&id=' + id
            },
            getSortList() {
                return getContentPhoto().reverse()
            },
            getModel: function () {
                if ((navigator.userAgent.match(/(phone|baipad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
                    this.checkType = false
                } else {
                    this.checkType = true
                }
            },
            gotoPage: function (page) {
                console.log(page)
                window.location.href = './' + page
            }
        },
        created: function () {
            this.getModel()
        },
        // 自适应屏幕
        mounted: function () {
            this.screenWidth = document.body.clientWidth
            this.screenHeight = document.body.clientHeight
            this.changeDiv = parseInt(Number(document.body.clientWidth) / 2)
            window.onresize = () => {
                return (() => {
                    this.screenWidth = document.body.clientWidth
                    this.screenHeight = document.body.clientHeight
                    // 是否展示author列
                    if (this.changeDiv >= this.screenWidth || this.screenWidth < 1000) {
                        this.checkType = false
                    } else {
                        this.checkType = true
                    }
                })();
            };
        }
    })
</script>
</html>